<template>
  <div class="index">
    <header>
      <div class="list_item" v-for="(item, index) in counterStore.indexList" :key="index">
        <div class="item_top">
          <img :src="item.img" />
          <div class="top_right">
            <p :style="{ color: item.color }">
              ￥
              <span style="font-size: 20px">{{ item.price }}</span>
            </p>
            <p>{{ item.text }}</p>
          </div>
        </div>
        <div class="item_bottom">
          日同比
          <span style="color:aquamarine">{{ item.desc }}</span>
        </div>
      </div>
    </header>
    <main>
      <div class="line">
        <!-- <h3 >近一周售票量</h3> -->
        <lineEcharts>
          <template #header>
            <h3 style="color: #3bc9a9; margin-top: 20px; margin-left: 20px;">近一周售票量</h3>
          </template>
        </lineEcharts>
      </div>
      <div class="bar">
        <BarCharts>
          <template #header="{ title }">
            <h3 style="color: #3bc9a9; margin-top: 20px; margin-left: 20px;">{{ title }}</h3>
          </template>
          <template #tabs>
            <el-tabs v-model="activeName" type="card" class="demo-tabs" @tab-click="handleClick">
              <el-tab-pane label="出发城市" name="first">
                <div ref="fromDom" :style="{ width: '35vw', height: '350px' }"></div>
              </el-tab-pane>
              <el-tab-pane label="到达城市" name="second">
                <div ref="toDom" :style="{ width: '35vw', height: '350px' }"></div>
              </el-tab-pane>
            </el-tabs>
          </template>
        </BarCharts>
      </div>
    </main>
    <footer>
      <div class="footer_left">
        <OrderCharts>
          <template #title>
            <h3>今日订单状态占比</h3>
          </template>
        </OrderCharts>
      </div>
      <div class="footer_center">
        <PayCharts>
          <template #title>
            <h3>今日支付方式对比</h3>
          </template>
        </PayCharts>
      </div>
      <div class="footer_right">
        <CityCharts>
          <template #title>
            <h3>今日热门出发到达城市</h3>
          </template>
        </CityCharts>
      </div>
    </footer>
  </div>
</template>

<script setup>
import { ref, onMounted } from "vue";
import { useCounterStore } from '../../stores/counter.ts'
import LineEcharts from '../../components/LineEcharts.vue'
import BarCharts from '../../components/BarCharts.vue'
import { useEchartsStore } from '../../stores/counter.ts'
import * as echarts from 'echarts';
import OrderCharts from '../../components/pieCharts/OrderCharts.vue'
import PayCharts from '../../components/pieCharts/PayCharts.vue'
import CityCharts from '../../components/pieCharts/CityCharts.vue'


const echartsStore = useEchartsStore()

const activeName = ref('first')

const counterStore = useCounterStore()

const fromDom = ref(null);
const toDom = ref(null);

onMounted(() => {
  // 在组件挂载后初始化Echarts图表
  const fromChart = echarts.init(fromDom.value);
  const toChart = echarts.init(toDom.value);

  // 使用配置项和数据绘制图表
  fromChart.setOption(echartsStore.barOption);
  toChart.setOption(echartsStore.barOption1);
  // console.log(current)
});

</script>

<style scoped lang="scss">
$font-color: #3bc9a9;

.index {
  width: 100%;
  height: 100%;
}

.index header {
  width: 100%;
  height: auto;
  display: flex;
  justify-content: space-between;
  margin-bottom: 20px;
}

.index header .list_item {
  width: 20vw;
  height: auto;
  background-color: #ffffff;
  box-shadow: 0vw 0vw 1vw 0vw rgba(51, 51, 51, 0.1);
  border-radius: 1vw;
  padding: 10px;
}

.index header .list_item .item_top {
  display: flex;
  margin-bottom: 10px;
  border-bottom: 1px solid #ccc;
  justify-content: space-between;
}

.index header .list_item .item_top .top_right {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: flex-end;
}

.index header .list_item .item_top img {
  width: 80px;
  height: 80px;
  padding: 10px;
}

.index main {
  display: flex;
  justify-content: space-between;
}

.index main .line {
  width: 46vw;
  height: 25vw;
  background-color: #ffffff;
  box-shadow: 0vw 0vw 1vw 0vw rgba(51, 51, 51, 0.1);
  border-radius: 1vw;
}

.index main .bar {
  width: 37vw;
  height: 25vw;
  background-color: #ffffff;
  box-shadow: 0vw 0vw 1vw 0vw rgba(51, 51, 51, 0.1);
  border-radius: 1vw;
}

.demo-tabs>.el-tabs__content {
  padding: 32px;
  color: #6b778c;
  font-size: 32px;
  font-weight: 600;
}

footer {
  width: 85vw;
  height: 19vw;
  background-color: #ffffff;
  box-shadow: 0vw 0vw 1vw 0vw rgba(51, 51, 51, 0.1);
  border-radius: 1vw;
  margin-top: 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;

  >div {
    width: 30%;
    // border-right: 1px solid #ccc;
    // background-color: #ccc;
    height: 90%;
  }

  h3 {
    color: $font-color;
    text-align: center;
  }

  .footer_center {
    width: 35%;
    // padding: 20px;
    border-left: 1px solid #ccc;
    border-right: 1px solid #ccc;
  }
}
</style>